<script setup lang="ts">
import LeftDialog from "./components/LeftDialog.vue";
import {useRouter} from 'vue-router';

const router = useRouter();
import {useIndex} from './hooks/useIndex'
const {leftDialog} = useIndex()
const barData= ref([
  { name: 'TQQQ', value: 0.5 },
  { name: 'ADA', value: 0.6 },
  { name: 'TQQQ', value: 0.5 },
  { name: 'ADA', value: 0.6 },
  { name: 'ADA', value: 1 },
])

const showVirtualProfitDetail = ref(false);
const handleVirtualProfitDetail = () => {
  showVirtualProfitDetail.value = true
}

const showLeftDialog = () => {
  leftDialog.value.openDialog()
}
const handleSearch = () => {
  router.push('/search');
}
const handleNotice = () => {
  router.push('/notice');
}
</script>
<template>
  <div class="home-container">
    <nav-header class="header">
      <template #left>
        <div class="left" @click="showLeftDialog">
          <img src='@/assets/images/icon/icon-home-menu.png' alt=''>
        </div>
      </template>
      <template #middle>
        <div class="middle" @click='handleSearch'>
          <van-field
              clearable
              left-icon="search"
              placeholder="搜索"
          />
        </div>
      </template>

      <template #right>
        <div class="right" @click='handleNotice'>
          <img src='@/assets/images/icon/icon-home-notice.png' alt=''>
        </div>
      </template>
    </nav-header>
    <div class="content-box">
      <div class="virtual-profit">
        <div class="welcome">
          <div class='tip'>
            <div class='tip1'>欢迎回来！</div>
            <div class='tip2'>虚拟投资组合价值</div>
          </div>
          <div class='icon'>
            <img @click='handleVirtualProfitDetail' src='@/assets/images/icon/icon-home-detail.png' alt=''>
          </div>
        </div>
        <div class="money">
          <div class='money-total'><span class="symbol">$</span>99,928.53</div>
          <div class='money-rate'>-71.47(-0.36%)</div>
        </div>
      </div>
    </div>
    <div class='verify-list'>
      <div   class='verify-account'>
        <div class='tip1'>欢迎来到A/D平台</div>
        <div class='tip2'>验证您的账户以开始投资。</div>
        <img class='icon-varify' src='@/assets/images/icon/icon-varifyaccount1.png' alt=''>
        <div class='step-box'>
          <van-steps direction="vertical" :active="0">
            <van-step>
              <div>审核中</div>
            </van-step>
            <van-step>
              <div>待入金</div>
            </van-step>
          </van-steps>
        </div>
      </div>
      <div   class='verify-account already-funded'>
        <div class='tip1'>
          上市销售前
          <van-icon name="arrow" />
        </div>
        <div class='tip2'>对投资组合的影响

          <span class="rate">
<!--            <img src="@/assets/images/icon/icon-home-funded-rate-red.png" alt="">-->
            <img src="@/assets/images/icon/icon-home-funded-rate-green.png" alt="">
            0.21%</span>
        </div>
        <div class="already-funded-bar">
          <div v-for="(item,index) in barData" :key="index" class="onebar">
            <div class="bar">
              <span class="progress" :style="{'height':`${item.value*100}%`}" >
                <span class="bar-rate">{{`${item.value*100}%`}}</span>
              </span>
            </div>
            <div class="bar-bottom">
              <img src="@/assets/images/icon/icon-home-list-btc.png" alt="">
               <span>{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='currencies-list'>
      <div class='currencies-list-item' :key='index' v-for='(item,index) in 5'>
        <div class='name'>SPX500</div>
        <div class='value'>4872.99</div>
        <div :class="['rate',index==1?'red':'']">+0.11%</div>
      </div>
    </div>
    <div class='deliver-4'></div>
    <div class="content-box">
      <div class='top-title'>
        <div class='title'>TOP10股票</div>
        <div class='more'>
          <span>查看更多</span>
          <img src='@/assets/images/icon/icon-arrow-more.png' alt=''>
        </div>
      </div>
      <CurrenciesList></CurrenciesList>
    </div>


  </div>
  <van-action-sheet class='sheet-virtual-profit' v-model:show="showVirtualProfitDetail" title=' '>
    <div class="content-virtual-profit">
      <div class="virtual-profit">
        <div class="welcome">
          <div class='tip'>
            <div class='tip2'>虚拟投资组合价值</div>
          </div>
        </div>
        <div class="money">
          <div class='money-total'><span class="symbol">$</span>99,928.53</div>
          <div class='money-rate'>-71.47(-0.36%)</div>
        </div>
      </div>
      <div class='info'>
        <van-cell border title="总投资额" value="$20,000.00"/>
        <van-cell title="可用现金" value="$80,000.00"/>
      </div>
      <van-button
          class='btn-submit'
          type="primary"
      >
        <template #icon>
          <img src='@/assets/images/icon/icon-home-sheet-deposit.png' alt=''>
        </template>
        按钮
      </van-button>
    </div>
  </van-action-sheet>
  <LeftDialog ref="leftDialog"/>
</template>

<style lang='scss' scoped>
.home-container {
  width: 100%;
  overflow-x: hidden;

  .header {
    display: flex;

    .left {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 10px;
      height: 100%;

      img {
        width: 10px;
      }
    }

    .middle {
      flex: 1;
      background: #F7F7F7;
      border-radius: 4px;
      display: flex;
      align-items: center;

      .van-field {
        background: transparent;
        height: 18px;

        :deep(.van-field__left-icon) {
          color: #C4C4C4;
        }
      }
    }

    .right {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      padding-right: 10px;

      img {
        width: 10px;
      }
    }
  }

  .content-box {
    padding: 0 10px;

    .virtual-profit {
      margin-top: 10px;
      display: flex;
      flex-direction: column;

      .welcome {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tip {
          display: flex;
          flex-direction: column;

          .tip1 {
            font-weight: bold;
            font-size: 10px;
            color: #2C2C2C;
          }

          .tip2 {
            margin-top: 2px;
            font-weight: 400;
            font-size: 8px;
            color: #777777;
          }
        }

        .icon {
          img {
            width: 16px;
          }
        }
      }

      .money {
        margin-top: 3px;
        display: flex;
        flex-direction: column;

        &-total {
          font-weight: bold;
          font-size: 16px;
          color: #1642F4;
          display: flex;
          align-items: center;

          span {
            font-weight: 600;
            font-size: 12px;
            color: #1642F4;
          }
        }

        &-rate {
          font-size: 7px;
          color: #E8464A;
        }
      }
    }

  }

  .verify-list {
    padding: 0px 10px 10px 10px;

    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .verify-account {
      &:last-child {
        margin-right: 0 !important;
      }

      min-width: 152px;
      margin-right: 8px;
      flex-shrink: 0;
      margin-top: 12px;
      height: 123px;
      background: linear-gradient(180deg, #5B6071 0%, #323544 100%);
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      position: relative;
      padding: 10px;
      box-sizing: border-box;

      .tip1 {
        font-weight: bold;
        font-size: 10px;
        color: #FFFFFF;
      }

      .tip2 {
        font-weight: 400;
        font-size: 7px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 4px;
      }

      .icon-varify {
        width: 56px;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .step-box {
        position: absolute;
        left: 10px;
        bottom: 10px;

        .van-steps {
          background: transparent;
        }

        [class*=van-hairline]:after {
          display: none;
        }

        :deep(.van-step__icon--active) {
          color: transparent;
          background: url("../../assets/images/icon/icon-step-active.png");
          width: 9px;
          height: 9px;
          background-size: 100% 100%;
        }

        :deep(.van-step__circle) {
          color: transparent;
          background: url("../../assets/images/icon/icon-step-normal.png");
          width: 9px;
          height: 9px;
          background-size: 100% 100%;
        }

        :deep(.van-step__line) {
          height: 82%;
        }

        :deep(.van-step__title--active) {
          color: #92F74F;
        }
      }
    }
    .already-funded{
      background: #fff;
      padding: 10px;
      .tip1{
        font-style: normal;
        font-weight: bold;
        font-size: 8px;
        color: #2C2C2C;
        .van-icon-arrow{
          font-weight: bold;
        }
      }
      .tip2{
        font-size: 6px;
        color: #777777;
        span{
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-left: 2px;
          background: rgba(61, 174, 67, 0.15);
          border-radius: 8px;
          min-width: 25px;
          min-height: 8px;
          font-size: 5px;
          color: #3DAE43;
          img{
            vertical-align: middle;
            margin-right: 2px;
            width: 4px;
          }
        }
      }
      &-bar {
        margin-top: 10px;
        display: flex;
        .onebar {
          flex: 1;
          text-align: center;
          min-width: 15px;
           display: flex;
          flex-direction: column;
          justify-content: center;

          .bar {
            height: 40px;
            width: 12px;
            margin: 5px auto;
            margin-top: 0;
            border-radius: 4px 4px 0px 0px;
            position: relative;
            background: transparent;
            span.progress {
              position: absolute;
              bottom: 0;
              height: 0;
              width: 100%;
              display: block;
              -webkit-transition: height 2s ease-out;
              -o-transition: height 2s ease-out;
              transition: height 2s ease-out;
              border-radius: 4px 4px 0px 0px;
              background: linear-gradient(180deg, #7BDD4F 0%, #65B641 100%);
              .bar-rate{
                font-weight: bold;
                font-size: 6px;
                color: #3DAE43;
                margin-bottom: 2px;
                top: -10px;
                left: 0;
                position: absolute;
                width: 100%;
                text-align: center;
              }
            }
          }
          .bar-bottom {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
              width: 12px;
            }
            span{
              font-weight: bold;
              font-size: 5px;
              color: #777777;
              margin-top: 2px;
            }
          }

        }
      }
    }

  }

  .currencies-list {
    padding: 10px 10px 12px 10px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    &-item {
      min-width: 28%;
      position: relative;
      padding-left: 8px;

      &:first-child {
        padding-left: 0;
      }

      &:after {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0.5px;
        height: 25px;
        background: #EDEDED;
        right: 0;
        top: 0;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }

      .name {
        font-weight: 600;
        font-size: 5px;
        color: #777777;
      }

      .value {
        font-weight: 600;
        font-size: 7px;
        color: #2C2C2C;
        margin-top: 3px;
      }

      .rate {
        font-weight: 600;
        font-size: 6px;
        color: #3DAE23;
        margin-top: 3px;
      }

      .red {
        color: #E8464A;
      }
    }
  }

  .deliver-4 {
    width: 100%;
    height: 4px;
    background: #F6F6F6;
  }

  .top-title {
    height: 29px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 9px;
      color: #2C2C2C;
      font-weight: bold;
    }

    .more {
      display: flex;
      align-items: center;

      span {
        font-size: 7px;
        color: #777777;
      }

      img {
        width: 4px;
      }
    }
  }
}
</style>
<style lang='scss'>
.sheet-virtual-profit {
  .van-action-sheet__header .van-action-sheet__close {
    color: #2C2C2C;
  }

  .content-virtual-profit {
    box-sizing: border-box;
    padding: 20px 10px 0px 10px;
    min-height: 136px;

    .virtual-profit {
      margin-top: 10px;
      display: flex;
      flex-direction: column;

      .welcome {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tip {
          display: flex;
          flex-direction: column;

          .tip2 {
            font-weight: 400;
            font-size: 8px;
            color: #777777;
          }
        }

        .icon {
          img {
            width: 16px;
          }
        }
      }

      .money {
        margin-top: 3px;
        display: flex;
        flex-direction: column;

        &-total {
          font-weight: bold;
          font-size: 16px;
          color: #1642F4;
          display: flex;
          align-items: center;

          span {
            font-weight: 600;
            font-size: 12px;
            color: #1642F4;
          }
        }

        &-rate {
          font-size: 7px;
          color: #E8464A;
        }
      }
    }

    .info {
      margin-top: 8px;
    }

    .van-cell {
      padding-left: 0;
      padding-right: 0;

      .van-cell__title {
        font-size: 8px;
        color: #777777;
      }

      .van-cell__value {
        font-size: 8px;
        color: #2C2C2C;
        font-weight: bold;
      }
    }

  }

  .btn-submit {
    width: 100%;
    background: #F7F7F7;
    height: 24px;
    border-radius: 24px;
    color: #1642F4;
    font-weight: bold;
    border: none;
    margin: 10px 0;
    font-size: 8px;

    img {
      width: 10px;
    }
  }
}
</style>
./components/hooks/useIndex./hooks/useDialog
